<template>
  <div class="main">
    <el-card>
      <slot name="header" />

      <el-table
        :data="tableData"
        stripe
        border
        class="tableBox"
        max-width="250px"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          v-for="(item,index) in tableCellList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width||200"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
        >
          <template #default="scope">
            <slot :scope="scope" name="Btn" />
            <el-button type="text" size="small" class="txtBtn">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <slot name="bottomPage" />
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    tableCellList: {
      type: Array,
      default: () => {}
    },
    tableData: {
      type: Array,
      default: () => {}
    }
  }
}
</script>

<style>
.main{
  margin-top: 20px;
}
.tableBox{
  width: 100%;
  font-size: 18px;
  /* height:528px */
}
.txtBtn{
    font-size: 18px;
}
</style>
